<template>
  <div class="mine" @click="refresh">
    <!-- 背景色的头部~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <div class="mine-herder">
      <img src="@/images/mine/headerImg.jpg" class="header-img" />
      <div class="mine-name">
        <p>
          昵称:<span>{{ personaName }}</span
          ><i>vip会员</i>
        </p>
        <p>
          用户名ID：<span>{{ phone }}</span>
        </p>
      </div>
      <div class="a1" @click="showPopup">
        <b>切换账号</b><i class="iconfont">&#xe6a3;</i>
      </div>
      <div class="information" @click="goNews"><i class="iconfont">&#xe646;</i></div>
    </div>
    <!-- 推广工具栏~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <section class="mine-main">
      <ul>
        <li>
          <a href="#"> <i class="iconfont">&#xe685;</i><b>提现金额</b></a>
        </li>
        <li>
          <a href="#"><i class="iconfont">&#xe631;</i><b>我的收益</b></a>
        </li>
        <li>
          <a href="#"><i class="iconfont">&#xe62d;</i><b>我的团队</b></a>
        </li>
        <li>
          <a href="#"><i class="iconfont">&#xe601;</i><b>推广订单</b></a>
        </li>
        <li>
          <a href="#"><i class="iconfont">&#xe618;</i><b>邀请好友</b></a>
        </li>
      </ul>
    </section>
    <!-- 我的订单~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <section class="my-order" @click="goCart">
      <b>我的订单</b
      ><a href="#">查看全部订单<i class="iconfont">&#xe6a3;</i></a>
    </section>
    <!-- 订单分类~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <ul class="mine-order">
      <li @click="goPayment">
        <a href="#"><i class="iconfont">&#xe706;</i><b>待付款</b></a>
      </li>
      <li @click="goGoods">
        <a href="#"><i class="iconfont">&#xe622;</i><b>待发货</b></a>
      </li>
      <li @click="goCollect">
        <a href="#"><i class="iconfont">&#xe707;</i><b>待收货</b></a>
      </li>
      <li @click="goLogiatics">
        <a href="#"><i class="iconfont">&#xe64c;</i><b>售后服务</b></a>
      </li>
    </ul>
    <!-- 更多~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <section class="mine-more">
      <ul>
        <li>
          <a href="#"
            ><div @click="goAdd"><i class="iconfont">&#xe641;</i><b>地址管理</b></div>
            <i class="iconfont">&#xe6a3;</i></a
          >
        </li>
        <li>
          <a href="#"
            ><div><i class="iconfont">&#xe612;</i><b>我的会员</b></div>
            <i class="iconfont">&#xe6a3;</i></a
          >
        </li>
        <li>
          <a href="#"
            ><div @click="goChat"><i class="iconfont">&#xec2e;</i><b>客服中心</b></div>
            <i class="iconfont">&#xe6a3;</i></a
          >
        </li>
        <li>
          <a href="#"
            ><div @click="goQuestion"><i class="iconfont">&#xe8a1;</i><b>意见反馈</b></div>
            <i class="iconfont">&#xe6a3;</i></a
          >
        </li>
        <li>没有更多了</li>
      </ul>
    </section>
    <!-- 遮罩层请登录~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <van-cell is-link @click="showPopup" class="dis-none">展示弹出层</van-cell>
    <van-popup v-model="show" id="mine-show"
      ><p>亲亲还没有登录呢</p>
      <span @click="goLogin">我有账号</span
      ><span @click="goRegister">第一次用</span>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'mine',
  data() {
    return {
      show: false,
      personaName: '',
      phone: '',
    }
  },

  methods: {
    refresh() {
      const user = JSON.parse(localStorage.getItem('user')) || []
      const persona = JSON.parse(localStorage.getItem('personalCenter')) || []
      // console.log(persona.length)
      const res = user.find((item) => {
        return item.telephone === persona.value
      })
      if (res) {
        const res = user.find((item) => {
          return item.telephone === persona.value
        })
        // console.log(res)
        this.personaName = res.VIPname
        this.phone = res.telephone
      } else {
        this.showPopup()
      }
      // const data =user.find
    },
    // 遮罩层函数
    showPopup() {
      // console.log(this.$router)
      this.show = true
    },
    // 跳转消息
    goNews() {
      this.$router.push({ path: '/news' })
    },
    // 跳转地址
    goAdd() {
      this.$router.push({ path: '/add' })
    },
    // 跳转售后物流
    goLogiatics() {
      this.$router.push({ path: '/logistics' })
    },
    // 跳转收货
    goCollect() {
      this.$router.push({ path: '/collect' })
    },
    // 跳转发货
    goGoods() {
      this.$router.push({ path: '/deliverGoods' })
    },
    // 跳转待付款
    goPayment() {
      this.$router.push({ path: '/payment' })
    },
    // 跳转我的订单
    goCart() {
      this.$router.push({ path: '/cart' })
    },
    // 跳转登录
    goLogin() {
      this.$router.push({ path: '/login' })
    },
    // 跳转注册
    goRegister() {
      this.$router.push({ path: '/register' })
    },
    // 切换消息中心
    goChat() {
      this.$router.push({ path: '/chat' })
    },
    goQuestion() {
      this.$router.push({ path: '/question' })
    },
  },
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
//图标通配~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@font-face {
  font-family: "iconfont"; /* Project id 3284892 */
  src: url("//at.alicdn.com/t/font_3284892_js94ky935hd.woff2?t=1648524295715")
      format("woff2"),
    url("//at.alicdn.com/t/font_3284892_js94ky935hd.woff?t=1648524295715")
      format("woff"),
    url("//at.alicdn.com/t/font_3284892_js94ky935hd.ttf?t=1648524295715")
      format("truetype");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
.mine {
  display: flex;
  flex-wrap: wrap;
  overflow-y: hidden;
  //背景图头部~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  .mine-herder {
    background-color: #fff;
    width: 100%;
    height: 180px;
    background-color: #464c5b;
    display: flex;
    position: relative;
    > .header-img {
      width: 52px;
      height: 50px;
      border-radius: 50%;
      margin-left: 35px;
      margin-top: 60px;
    }
    > .mine-name {
      width: 140px;
      height: 44px;
      margin-top: 65px;
      margin-left: 12px;
      color: #fff;
      > p {
        width: 100%;
        padding-bottom: 15px;
        font-size: 12px;
        > i {
          float: right;
          font-style: normal;
          color: #f19736;
        }
      }
    }
    .a1 {
      width: 80px;
      height: 50px;
      margin-top: 70px;
      margin-left: 80px;
      color: #fff;
      display: flex;
      line-height: 50px;
      > b {
        display: block;
        height: 50px;
      }
      > i {
        font-size: 15px;
      }
    }
    .information {
      width: 40px;
      height: 40px;
      position: absolute;
      top: 20px;
      right: 10px;
      > i {
        font-size: 30px;
        color: #fff;
      }
    }
  }
  //推广工具栏~~~~~~~~~~~~~~~~~~~~~~~~
  .mine-main {
    width: 100%;
    height: 160px;
    border-bottom: 1px solid #f2f2f2;
    ul {
      display: flex;
      justify-content: space-around;
      height: 160px;
      align-items: center;
      li {
        a {
          width: 100%;
          height: 70px;
          font-size: 15px;
          display: flex;
          color: #8a8a8a;
          flex-direction: column;
          align-items: center;
          > i {
            font-size: 40px;
          }
          > b {
            font-weight: 400;
            padding-top: 15px;
          }
        }
      }
    }
  }
  //我的订单~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  .my-order {
    width: 100%;
    height: 80px;
    border-bottom: 1px solid #f2f2f2;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    > a {
      color: #999999;
      > i {
        padding: 0 6px;
      }
    }
    > b {
      font-weight: 400;
    }
  }
  //订单分类~~~~~~~~~~~~~~~~~~~~~~~~
  .mine-order {
    width: 100%;
    height: 100px;
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    justify-content: space-around;
    > li {
      > a {
        color: #999;
        font-size: 14px;
        display: flex;
        width: 100%;
        height: 90px;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        box-sizing: border-box;
        padding: 8px 0;
        > i {
          font-size: 35px;
        }
      }
    }
  }
  // <!-- 更多~~~~~~~~~~~~~~~~~~~~~~~~ -->
  .mine-more {
    width: 100%;
    min-height: 200px;
    > ul {
      > li {
        width: 100%;
        height: 50px;
        text-align: center;
        > a {
          width: 100%;
          height: 50px;
          border-bottom: 1px solid #f2f2f2;
          color: #808080;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 20px;
          box-sizing: border-box;
          > div {
            width: 90px;
            height: 50px;
            line-height: 50px;
            display: flex;
            justify-content: space-around;
            > b {
              color: #000;
              font-weight: 400;
              font-size: 14px;
            }
            > i {
              font-size: 25px;
            }
          }
          > i {
            display: block;
            width: 25px;
            // background-color: #f00;
          }
        }
      }
    }
  }
  #mine-show {
    width: 260px;
    height: 180px;
    font-size: 20px;
  border-radius: 10px;
    text-align: center;
    > p {
      color: rgb(7, 156, 243);
      line-height: 80px;
      margin: 10px auto;
    }
    > span {
      margin: 8px;
      padding: 12px;
      color: rgb(8, 130, 179);
      background-color: rgb(248, 226, 206);
      opacity: 0.8;
      border-radius: 10px;
    }
  }
  .dis-none {
    display: none;
  }
}
</style>
